import React, { useState, useEffect, useCallback } from 'react'
import { message, Space, Table, Tag, Col, Row, Button, Popconfirm, Drawer, Input, Form } from 'antd';
import { DeleteOutlined, FormOutlined, PlusOutlined, CloseOutlined } from '@ant-design/icons'

import request from '../../../utils/request';
import { useNavigate, useSearchParams } from 'react-router-dom';

const List = () => {
    const [form] = Form.useForm();

    const onReset = () => {
        form.resetFields();
    };//表单添加提交后清空输入框内容

    const navigate = useNavigate()

    const [selectIds, setSelectIds] = useState([])//拿复选框id的
    const [urlParams, setUrlParams] = useSearchParams()


    // 第三步，因为表格需要数据，所以需要请求数据
    // const data = [
    //     {
    //         key: '1',
    //         name: 'John Brown',
    //         age: 32,
    //         address: 'New York No. 1 Lake Park',
    //         tags: ['nice', 'developer'],
    //     },
    // ]


    // 第三步：请求数据：
    const [datalist, setDatalist] = useState()

    const getData = async () => {
        const { data } = await request.get('/category')
        console.log('category_data', data);
        setDatalist(data.data)

    }




    // 第五步：实现抽屉遮罩层
    const [open, setOpen] = useState(false);
    const [placement, setPlacement] = useState('left');

    const showDrawer = () => {
        setOpen(true);//点击的时候让遮罩层出现
    };

    const onClose = () => {
        setOpen(false);
    };

    const onChange = (e) => {
        setPlacement(e.target.value);
    };

    // 第四步：实现各种方法增删改查
    // 4-1.删除分类数据
    const removeItem = useCallback(async (id) => {
        const { data } = await request.delete('/category/' + id)
        if (data.status === 200) {
            message.success('数据删除成功')
            // 刷新页面方案一：重新请求数据
            getData()

            // 刷新页面方案二：修改state达到刷新的效果
            // setDatalist(datalist.filter(item=>item._id != id))
        }

    }, [datalist])

    // 4-1.1实现批量删除功能
    const removeItems = useCallback(async () => {
        if (selectIds.length === 0) {
            return message.warning('请选择删除的数据');
        }
        const { data } = await request.delete('/category', {
            data: {
                ids: selectIds
            }
        })
        if (data.status === 200) {
            message.success('数据删除成功')
            getData()

        }

    }, [selectIds])
    // 4.2实现添加功能
    // 表单的添加的功能的实现，表单中有一个onFinish，是验证成功后的回调事件
    const submit = async (values) => {
        console.log('表单添加的values111', values);
        const { data } = await request.post('category', values)

        console.log('submit_data', data);
        if (data.status === 200) {
            getData()
            setOpen(false);//这个是关闭抽屉
            onReset()//这个是清空输入框内容
        }



    }

    // 4.3实现编辑功能
    const editItem = useCallback((id) => {
        navigate('/manage/category/' + id)
    }, [])



    // 复选框
    const rowSelection = {
        onChange(selectedRowKeys) {
            // console.log('selectedRowKeys=', selectedRowKeys)这个点击复选框会的得到id是一个数组来的
            setSelectIds(selectedRowKeys)
        }
    }





    // 实现分页功能
    const pagination = {
        current: Number(urlParams.get('page')) || 1,
        onChange(page, size) {
            setUrlParams({
                page,
                size

            })
        }

    }




    // 第二步：222222配置表格数据
    const columns = [
        {
            title: '#',
            key: '_id',
            render(text, record, index) {
                return index + 1
            }
        },
        {
            title: '分类名称',
            dataIndex: 'name',
        },
        {
            title: '时间',
            dataIndex: 'addtime',
            render(text, record, index) {

                return <p >{text.substring(0, 10)}</p>
            }
        },
        {
            title: '操作',
            dataIndex: '_id',
            width: 100,
            render(id) {

                return (
                    // <React.Fragment>

                    <Space>
                        <Button ghost type='primary' icon={<FormOutlined />} size="small"
                            onClick={editItem.bind(null, id)}
                        ></Button>
                        <Popconfirm
                            title="确认删除"
                            onConfirm={removeItem.bind(null, id)}
                        >
                            <Button danger icon={<DeleteOutlined />} size="small"></Button>

                        </Popconfirm>
                    </Space>

                )
            }
        },


    ]






    useEffect(() => {
        getData()

    }, [])
    // 想问个问题，要是点击到了第二页，用户添加数据，怎么可以又回到第一页看到最新数据呢？


    return (
        <div>
            <Row gutter={20}>
                <Col span={8}>
                    <Button ghost type='primary' icon={<PlusOutlined />} onClick={showDrawer}>添加</Button>
                </Col>
                <Col span={16} className='text-right'>
                    <Popconfirm
                        title="确认删除"
                        onConfirm={removeItems}
                    >
                        <Button danger icon={<DeleteOutlined />} >批量删除</Button>
                    </Popconfirm>
                </Col>
                <Drawer
                    title="添加分类"
                    placement='bottom'
                    onClose={onClose}
                    closable={false}
                    open={open}
                    key={placement}
                // closeIcon={<CloseOutlined />}//关闭按钮
                >
                    <Form layout="vertical"
                        onFinish={submit}
                        form={form}>

                        <Form.Item
                            name="name"
                            label="分类名称"
                            rules={[{ required: true, message: '请输入要添加的分类' }]}
                        >
                            <Input />
                        </Form.Item>
                        <Form.Item>
                            <Button type="primary" htmlType='submit'>
                                确认添加
                            </Button>
                        </Form.Item>
                    </Form>

                </Drawer>
            </Row>


            {/* 第一步：11111引入表格 */}
            <Table
                columns={columns}
                rowKey="_id"
                dataSource={datalist}
                rowSelection={rowSelection}
                pagination={pagination}

            />
        </div>
    )
}




export default List;